<template>
<div class="activity-like views-container">
                <!-- 添加虚拟用户弹窗 -->
                <el-dialog width="70%" :before-close="handleClose" :visible.sync="dialogListForm" custom-class="reset-pwd wlm-form-dialog dialog-table" style="margin-top: -10vh;">
                  
                    <div class="wlm-form" v-if="dialogListForm" style="margin-bottom:0">
                          <div class="wlm-form" style="margin-bottom:0">
                        <div class="wlm-form-header wlm-dialog-fixheader">
                            <span class="wlm-dialog-inlenr">选择福卡</span>
                        </div>
                    </div>
                        <div class="zsImgs">
                            <div style="position:relative;margin-right:30px" v-for="(item,index) in imgList" :key="index" @click="chooseImg(index)">
                                <img class="imgs" :src="item.colours_img[0].file_path" alt="">
                                <div class="name">{{item.name}}</div>
                                <img v-if="item.checked" style="width:32px;height: 32px;position: absolute;bottom: 0;right: 0;" src="../../assets/image/right-gou.png" alt="">
                            </div>
                        </div>
                    </div>
                    <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter" style="margin-top:50px;">
                        <el-button size="small" type="primary" @click="clsckbtn()">确定</el-button>
                    </footer>
                </el-dialog>
                
            <div class="wlm-form">
                <div class="wlm-form-header"> 查看福袋（用户：{{nickName}}）</div>
                <div class="wlm-form-content">
                        <div style="text-align:center;">
                            <div class="zsImgs">
                                <div style="position:relative;margin-right:50px" v-for="(item,index) in imgList" :key="index">
                                    <img class="imgs" :src="item.colours_img[0].file_path" alt="">
                                    <div class="number">{{item.user_font_count}}</div>
                                    <div class="name">{{item.name}}</div>
                                </div>
                            </div>
                            <el-button class="btn" size="small" type="primary" @click="moTaiOpen">赠送福卡</el-button>
                        </div>
                </div>
            </div>
         
     </div>
   
</template>

<script>
import {
    blessingUserFonts,
    blessingGiveFonts
} from '@/api/application'
export default {
    data() {
        return {
            nickName: this.$route.query.nickName,
            dialogListForm: false,
            imgList: [],
            form: {
                blessing_id: '',
                id: ''
            },
            checkedImg: {
                blessing_id: '',
                id: '',
                font_index: []
            }
        }
    },
    mounted() {
        this.form.blessing_id = this.$route.query.blessing_id
        this.form.id = this.$route.query.id
        this.$nextTick(() => {
            setTimeout(() => {
                this.getList()
            }, 500)

        })
    },
    methods: {
        //关闭赠送模板
        handleClose(done) {
            done();
            this.imgList.map((item) => {
                item.checked = false
            })

        },
        //获取福卡
        getList() {
            blessingUserFonts(this.form).then((res) => {
                this.imgList = res.data.data
                this.imgList.map((item) => {
                    item.checked = false
                })

            })
        },
        moTaiOpen() {
            this.dialogListForm = true
            this.checkedImg.blessing_id = this.$route.query.blessing_id
            this.checkedImg.id = this.$route.query.id
        },
        chooseImg(index) {
            let _this = this
            if (_this.imgList[index].checked == false) {
                _this.imgList[index].checked = true
                _this.checkedImg.font_index.push(_this.imgList[index].font_index)
            } else {
                _this.imgList[index].checked = false
                _this.checkedImg.font_index.splice(index, 1)

            }
            _this.$forceUpdate()
        },
        //赠送福卡
        clsckbtn() {
            if (this.checkedImg.font_index.length > 0) {
                blessingGiveFonts(this.checkedImg).then((res) => {
                    if (res.data.code == 1) {
                        this.checkedImg.font_index = []
                        this.$message.success(res.data.msg)
                        this.dialogListForm = false
                        this.getList()
                        this.imgList.map((item) => {
                            item.checked = false
                        })

                    } else {
                        this.$message.error(res.data.msg)
                    }
                })
            } else {
                this.dialogListForm = false
            }

        },
    }
}
</script>

<style lang="scss" scoped>
.zsImgs {
    padding: 70px 70px 0 70px;
    display: flex;
    // justify-content: space-between;
    cursor:pointer;
    flex-wrap:wrap;
    .imgs {
        // border: 1px solid #eeeeee;
       padding: 30px;
            width: 260px;
    height: 226px;
    }
      :hover{
        background: #eeeeee;
    }
    .number {
        position: absolute;
        right: -5px;
        top: -5px;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 15px;
        // border: 1px solid black;
        background: red;
        color: #ffffff;
        pointer-events: none;
    }

    .name {
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 30px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -25px;
        margin-top: -25px;
        pointer-events: none;
    }
    
}

.btn {
    margin-top: 100px;
}
</style>
